<template>
  <div class="welcome">
    <div class="content"> 
 

 
 <el-row :gutter="20">
        <el-col :span="6">
            <div class="grid-content bg-purple2"   >
              <div class="panel_icon" style="background: #409EFF;"  >
                <el-icon  :size="35">
                <BellFilled />
              </el-icon> 
              </div>
              <div class="panel_word">
                <span>{{list.totaluser}}</span>
                <cite>总会员数</cite>
              </div>
              <div style="    clear: both;"></div>
            </div> 
        </el-col>
        <el-col :span="6"><div class="grid-content bg-purple2"    >
              <div class="panel_icon" style="background: #F56C6C;" >
                <el-icon  :size="35">
                <BellFilled />
              </el-icon> 
              </div>
              <div class="panel_word">
                <span>{{list.totaladmin}}</span>
                <cite>总管理员数</cite>
              </div>
              <div style="    clear: both;"></div>
            </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple2" >
              <div class="panel_icon"  style="background: #E6A23C ;">
                <el-icon  :size="35">
                <BellFilled />
              </el-icon> 
              </div>
              <div class="panel_word">
                <span>{{list.todayuserlogin}}</span>
                <cite>今日登录人数</cite>
              </div>
              <div style="    clear: both;"></div>
            </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple2"   >
              <div class="panel_icon"  style="background: #67C23A;">
                <el-icon  :size="35">
                <BellFilled />
              </el-icon> 
              </div>
               <div class="panel_word userAll">
                  <span>{{list.todayusersignup}}</span>
                  <cite>今日新增人数</cite>
                </div>
              <div style="    clear: both;"></div>
            </div>
          </el-col>
         
      </el-row>


      <el-row :gutter="20">
    <div id="main" style="height:350px; width: 60%; float: left;"></div>
      <div style="height:350px; width: 35%; float: right;padding: 20px 0px;">
                        <div class="card2" style=" float: left;">
                            <div class="panel_icon" style="color:#28BB9C">       <el-icon  :size="35">  <BellFilled />   </el-icon> 
                            </div>
                            <div class="panel_word"> <span style="">{{list.threednu}}</span>
 <cite>三日新增</cite>
                            </div>
                        </div>
                        <div class="card2" style=" float: right;">
                            <div class="panel_icon" style="color:#28BB9C">  <el-icon  :size="35">  <BellFilled />   </el-icon> 
                            </div>
                            <div class="panel_word"> <span>{{list.sevendnu}}</span>
 <cite>七日新增</cite>
                            </div>
                        </div>
                        <div class="card2" style=" float: left;">
                            <div class="panel_icon" style="color:#28BB9C">   <el-icon  :size="35">  <BellFilled />   </el-icon> 
                            </div>
                            <div class="panel_word"> <span>{{list.sevendau}}</span>
 <cite>七日活跃</cite>
                            </div>
                        </div>
                        <div class="card2" style=" float: right;">
                            <div class="panel_icon" style="color:#28BB9C">   <el-icon  :size="35">  <BellFilled />   </el-icon> 
                            </div>
                            <div class="panel_word"> <span>{{list.thirtydau}}</span>
 <cite>月活跃</cite>
                            </div>
                        </div>
                        <div class="card2" style=" float: left;">
                            <div class="panel_icon" style="color:#28BB9C">   <el-icon  :size="35">  <BellFilled />   </el-icon> 
                            </div>
                            <div class="panel_word"> <span>{{list.dbtablenums}}</span>
 <cite>数据库表</cite>
                            </div>
                        </div>
                        <div class="card2" style=" float: right;">
                            <div class="panel_icon" style="color:#28BB9C">   <el-icon  :size="35">  <BellFilled />   </el-icon> 
                            </div>
                            <div class="panel_word"> <span>{{list.dbsize}}</span>
 <cite>sql占用内存</cite>
                            </div>
                        </div>
                        <div style="clear: both;"></div>
                    </div>
                    <div style="clear: both;"></div>
      </el-row>
     <el-row :gutter="20">
        <el-col :span="6">
            <div class="grid-content bg-purple"  style="background: #409EFF;"   >
              <div class="panel_icon">
                <el-icon  :size="35">
                <BellFilled />
              </el-icon> 
              </div>
              <div class="panel_word">
                <span>{{list.totaluser}}</span>
                <cite>总会员数</cite>
              </div>
              <div style="    clear: both;"></div>
            </div> 
        </el-col>
        <el-col :span="6"><div class="grid-content bg-purple"   style="background: #F56C6C;"  >
              <div class="panel_icon">
                <el-icon  :size="35">
                <BellFilled />
              </el-icon> 
              </div>
              <div class="panel_word">
                <span>{{list.totaladmin}}</span>
                <cite>总管理员数</cite>
              </div>
              <div style="    clear: both;"></div>
            </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"  style="background: #E6A23C ;">
              <div class="panel_icon">
                <el-icon  :size="35">
                <BellFilled />
              </el-icon> 
              </div>
              <div class="panel_word">
                <span>{{list.todayuserlogin}}</span>
                <cite>今日登录人数</cite>
              </div>
              <div style="    clear: both;"></div>
            </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"   style="background: #67C23A;" >
              <div class="panel_icon">
                <el-icon  :size="35">
                <BellFilled />
              </el-icon> 
              </div>
               <div class="panel_word userAll">
                  <span>{{list.todayusersignup}}</span>
                  <cite>今日新增人数</cite>
                </div>
              <div style="    clear: both;"></div>
            </div>
          </el-col>
         
      </el-row>
   
       
    </div> 
  </div>
</template>

<script>
 
 
import * as echarts from 'echarts';
export default {
  data() {
    return { 
      option: {},
      list: {
                    "totaluser": 5,
                    "totaladmin": 3,
                    "todayusersignup": 0,
                    "todayuserlogin": 0,
                    "sevendau": 0,
                    "thirtydau": 0,
                    "threednu": 0,
                    "sevendnu": 0,
                    "dbtablenums": 10,
                    "dbsize": 622592,
                    "column": ["2022-03-01", "2022-03-02", "2022-03-03", "2022-03-04", "2022-03-05", "2022-03-06",
                            "2022-03-07"],
                    "userdata": [0, 0, 0, 0, 0, 0, 0]

                },
      option:{
        title: { text: "总用户量" },
        tooltip: {},
        xAxis: {
          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
        },
        yAxis: {},
        series: [
          {
            name: "用户量",
            type: "line",
            data: [0, 0, 0, 10, 10, 20, 20],
          }, 
        ],
      }
    };
  },
  mounted() {
    	this.getDashboard()
    //this.$root => app 
    // 绘制图表
  },
	methods: {
    async	getDashboard(){ 
					try {
						const res = await this.$api.getDashboard()
						 
	     	   this.list = res;
	     	   this.option.xAxis.data = res.column;
	     	   this.option.series = {
                  name: "用户量",
                  type: "line",
                  data:res.userdata,
          };
          /*图表使用*/
          let myChart = echarts.init(document.getElementById("main"));
           myChart.setOption(this.option);
				} catch (error) {
						console.error(error);
			} 
		
		},
  }

};
 
</script>
 
<style lang="scss">
.bg-purple2 {
    background: #fff;
   
}
.bg-purple2 .panel_icon {
    width: 40%;
    display: inline-block;
    padding: 34px 0;
    text-align: center;
    color: #fff;
}
.bg-purple2 .panel_word{
    width: 60%;
    display: inline-block;
    height: 80px;
    word-spacing: 2em;
    text-align: center;
    color: #333;
}
.el-col{
  min-width: 234px;
  margin-top: 10px;
}
.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
 .xue .el-card__header{
   background: #007AC2;color:#fff;
 }
 
.card-header {
  
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}
 .card2 {
            width:40%;
            border-bottom: 5px solid #28bb9c;
            background: #fff;
        }
        .card2 .panel_icon {
            width: 40%;
            display: inline-block;
            padding: 22px 0;
          
            height: 35px;
            background: #fff;
        }
        .card2 .panel_word {
            width: 60%;
            display: inline-block;
            
            color: #28bb9c;
            ;
            height: 80px;
            background: #fff;
        }
        .card2 .panel_word span {
            font-size: 25px;
            display: block;
            height: 55px;
            line-height: 55px;
        }

.welcome {
  
  background-color: #fff;
 
}
.el-row {
  margin: 10px;
  padding: 10px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;

  
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
  padding: 5px;
  color: #fff;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  // min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
/*面板1*/
  .panel{
            float: left;
            width: 19%;
            text-align: center;
            margin-left: 1%;
            border-radius: 10px;
            overflow: hidden;
            margin-top: 22px;
        }
        .panel_icon { 
            width: 40%;
            display: inline-block;
            padding: 22px 0; 
          
            text-align: center;
        }
        .panel_word { 
            width: 60%;
            display: inline-block;
          
            
            height: 80px;
             word-spacing: 2em;
            text-align: center;
        }
        .panel_word span {
            font-size: 25px;
            display: block;
            height: 55px;
            line-height: 55px;
        }.panel_box a cite {
            font-size: 16px;
            display: block;
            font-style: normal;
        }


@media (min-width: 768px){  
 .wrapper{
   background:#00FF66;
 }
} 
</style>